Ever considered how Twitter, Facebook and other Social Media knows what Image and Title to display when you copy in a link?

I recently rebuilt my whole website using SvelteKit, and when I was done I was going to share my site on Twitter. 

Image my disappointment when I copied the link in, and the Tweet Preview looked a really boring, which got me reading about The Open Graph Protocol.

OpenGraph meta tags are used to display rich website content on Social Media platform link shares.

You can read about this on my blog at 
https://programmingpercy.tech/blog/opengraph-protocol-how-and-why/

00:00 Intro
00:08 What Is OpenGraph Protocol And How To use It   
02:02 OpenGraph Meta Tags  
04:45 Open Graph Website
05:07 Twitter Tags & Alternate tags
06:00 Debugging Facebook card and twitter card

The open graph protocol - https://ogp.me
Twitter Docs - https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#opengraph
Twitter Validator - https://cards-dev.twitter.com/validator
Facebook Debugger - https://developers.facebook.com/tools/debug/
Facebook Docs - https://developers.facebook.com/docs/sharing/webmasters#markup
Rebuilt my blog in Sveltekit - https://programmingpercy.tech/blog/rebuilt-jekyll-blog-with-sveltekit/

Beach by MBB | https://soundcloud.com/mbbofficial
Music promoted by https://www.free-stock-music.com
Creative Commons Attribution-ShareAlike 3.0 Unported
https://creativecommons.org/licenses/...